@charset "UTF-8";
/* 20180410-cj */
.img-bg{
  //background: url('../../img/report/main_bg.jpg') 0 0 no-repeat;
  background: url("http://kidtts.tmooc.cn/script/css/rep/img/main_bg.jpg") 0 0 no-repeat;
  background-size: 100% 100%;
}
.img-bg:before{
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  visibility: hidden;
}
.main{
  margin: 3%;
  background-color: #fff;
}
.m-title{
  padding: 3% 0 4% 0;
  background: url("http://kidtts.tmooc.cn/script/css/rep/img/d_bg.png") 0 bottom no-repeat;
  background-size: 100%;
}
.m-title>img{
  width: 46%;
}
/* item模块 */
.md180411-cj-item{
  margin: 5% 0;
  padding: 0 3%;
}
.md180411-cj-item .title{
  margin-bottom: 3%;
}
.md180411-cj-item .title>img{
  width: 30%;
}
.md180411-cj-item .comment{
  font-size: 16px;
  line-height: 28px;
  text-indent: 30px;
}
.md180411-cj-item .pic-show>img{
  width: 100%;
  height: 100%;
}
/* item end */

/* 内容 */
.md180411-cj-info .item{
  padding-top: 2%;
}
.md180411-cj-info .cont{
  overflow: hidden;
}
.md180411-cj-info .point{
  display: inline-block;
  margin-top: 4px;
  margin-right: 1%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #677bff;
  line-height: 15px;
  text-align: center;
  color: #fff;
  font-size: 12px;
}
/* 内容end */

/* 学习进度条 */
.md180411-cj-studbar .bar-bg{
  margin-top: 4%;
  background-color: #eee;
  height: 13px;
  border-radius: 3px;
  margin-bottom: 6%;
}

@media (max-width: 530px) {
  .md180411-cj-studbar .bar-bg{
    height: 10px;
  }
}
@media (max-width: 420px) {
  .md180411-cj-studbar .bar-bg{
    height: 8px;
  }
}
.md180411-cj-studbar .bar-img{
  background: url("http://kidtts.tmooc.cn/script/css/rep/img/m_jd.png") 0 0 no-repeat;
  background-size: 100% 100%;
}
.md180411-cj-studbar .bar-img img{
  /*display: none;*/
}
.md180411-cj-studbar .bar-bg .bar-pro{
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  border-radius: 3px;
  background-color: #677bff;
}
.md180411-cj-studbar .bar-bg.w0 .bar-pro>img{
  display: none;
}
.md180411-cj-studbar .bar-bg.w20 .bar-pro{
  width: 20%;
}
.md180411-cj-studbar .bar-bg.w40 .bar-pro{
  width: 40%;
}
.md180411-cj-studbar .bar-bg.w60 .bar-pro{
  width: 60%;
}
.md180411-cj-studbar .bar-bg.w80 .bar-pro{
  width: 80%;
}
.md180411-cj-studbar .bar-bg.w100 .bar-pro{
  width: 100%;
}
.md180411-cj-studbar .bar-bg.w100 .bar-pro>.bar-icon{
  right: -16px;
}
.md180411-cj-studbar .bar-bg .bar-pro>.bar-icon{
  position: absolute;
  right: -40px;
  bottom: -3px;
  width: 46px;
}
/* 学习进度条 end */

/* 圆环图表 */
.md180410-cj-chart .main-tb{
  margin: 0 auto;
  padding: 5% 0;
  width: 50%;
}
.md180410-cj-chart .main-tb .inter-sr{
  position: relative;
  font-size: 0;
}
.md180410-cj-chart .main-tb .loop.level-1{
  background-color: #cecece;
}
.md180410-cj-chart .main-tb .loop.level-2{
  background-color: #7ca8ff;
}
.md180410-cj-chart .main-tb .loop.level-3{
  background-color: #535fff;
}
.md180410-cj-chart .main-tb .loop.level-4{
  background-color: #7ca8ff;
}
.md180410-cj-chart .main-tb .loop{
  display: inline-block;
  width: 50%;
  /*padding: 3px;*/
  border: 2px solid #fff;
}
.md180410-cj-chart .main-tb .loop:before{
  content:" ";
  display: inline-block;
  padding-bottom: 100%;
  vertical-align: middle;
}
.md180410-cj-chart .main-tb .loop.loop-1{
  border-radius: 100% 0 0 0;
  /*border-top: none;
  border-left: none;*/
}
.md180410-cj-chart .main-tb .loop.loop-2{
  border-radius:0 100% 0 0;
  /*border-top: none;
  border-right: none;*/
}
.md180410-cj-chart .main-tb .loop.loop-3{
  border-radius: 0 0 0 100%;
  /*border-left: none;
  border-bottom: none;*/
}
.md180410-cj-chart .main-tb .loop.loop-4{
  border-radius: 0 0 100% 0;
  /*border-bottom: none;
  border-right: none;*/
}

.md180410-cj-chart .main-tb .loop-box {
  display: inline-block;
  width: 50%;
  padding: 3px;
}
.md180410-cj-chart .main-tb .loop-box .loop{
  display: block;
  width: 100%;
  border: none;
}

.md180410-cj-chart .main-tb .inter-loop{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  margin-top: -25%;
  margin-left: -25%;
  width: 50%;
  background-color: #fff;
  border-radius: 50%;
}
.md180410-cj-chart .main-tb .inter-loop:before{
  content:"";
  display: inline-block;
  padding-bottom: 100%;
  width: .1px;
  vertical-align: middle;
}
.md180410-cj-chart .main-tb .float-title{
  position: absolute;
  width: 52%;
}
.md180410-cj-chart .main-tb .float-title>img{
  width: 100%;
}
.md180410-cj-chart .main-tb .float-title.ft-01{
  top: 10%;
  left: -40%;
  z-index: 10;
}
.md180410-cj-chart .main-tb .float-title.ft-02{
  top: 10%;
  right: -40%;
  z-index: 10;
}
.md180410-cj-chart .main-tb .float-title.ft-03{
  top: 74%;
  left: -40%;
  z-index: 10;
}
.md180410-cj-chart .main-tb .float-title.ft-04{
  top: 74%;
  right: -40%;
  z-index: 10;
}
.md180410-cj-chart .info-title .item{
  width: 33.3%;
}
.md180410-cj-chart .info-title .item .icon{
  display: inline-block;
  margin-top: 3px;
  margin-right: 2%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #cecece;
  vertical-align: top;
}
.md180410-cj-chart .info-title .item .icon.level-1{
  background-color: #cecece;
}
.md180410-cj-chart .info-title .item .icon.level-2{
  background-color: #7ca8ff;
}
.md180410-cj-chart .info-title .item .icon.level-3{
  background-color: #535FFF;
}
.md180410-cj-chart .info-title .item .icon.level-4{
  background-color: #7ca8ff;
}
/* 圆环图表 end */

/* LL-CSS */

.md-2018041001-ll{
  background: url("http://kidtts.tmooc.cn/script/css/rep/img/img_ll_01.jpg") repeat-y ;
  background-size: 100% auto ;
  color:#984e27;
  font-size: 16px;
}
.md-2018041001-ll .conp-box{
  padding: 3%;
  margin-top: -12%;
}
.md-2018041001-ll .con-box{
  padding: 12% 3% 3%;
  background: #fff;
}
.md-2018041001-ll .c-body{
  display: table;
  width: 100%;
}
.md-2018041001-ll .c-body .c-td{
  display: table-cell;
}
.md-2018041001-ll .c-body .c-td-1{
  width: 17%;
  padding-right: 3%;
  vertical-align: middle;
}
.md-2018041001-ll .c-body .c-td-2{
  border:1px dashed #ccc;
  border-radius: 7px;
  padding: 3%;
}

.md-2018041002-ll{
  margin-bottom: 4%;
}
.md-2018041002-ll .c-body .c-td-2{
  background: url("http://kidtts.tmooc.cn/script/css/rep/img/img_ll_14.png") no-repeat right bottom;
  background-size: 23%;
  padding-bottom: 30%;
}
.md-2018041002-ll li{
  margin-bottom: 3%;
  padding-left: 30px;
  font-size: 16px;
  background: url("http://kidtts.tmooc.cn/script/css/rep/img/img_ll_19.png") no-repeat left 2px;
  background-size:20px auto ;
}

@media (max-width: 480px) {
  .md-2018041002-ll li{
    font-size: 14px;
  }
}

.md-2018041003-ll{
  margin-bottom: 4%;

}
.md-2018041003-ll .col-5{
  width: 50%;
  float: left;
  padding: 0 3% 0 0;
}
.md-2018041003-ll .item{
  height: 26px;
  margin: 3% 0;
}
.md-2018041003-ll .tit{
  font-weight: bold;
  line-height: 24px;
  vertical-align: middle;
  margin-right: 8px;
}
.md-2018041003-ll .star{
  margin: 0 3%;
  display: inline-block;
  height: 23px;
  width: 23px;
  vertical-align: middle;
  background: url("http://kidtts.tmooc.cn/script/css/rep/img/img_ll_16.png") no-repeat;
  background-size: 100% 100%;
}
.md-2018041003-ll .star.star-o{
  background: url("http://kidtts.tmooc.cn/script/css/rep/img/img_ll_15.png") no-repeat;
  background-size: 100% 100%;
}

@media (max-width: 580px) {
  .md-2018041003-ll .col-5{
    width: 100%;
    float: none;
  }
}
@media (max-width: 480px) {
  .md-2018041003-ll .tit{
    font-size: 14px;
  }
  .md-2018041003-ll .star{
    height: 20px;
    width: 20px;
  }
}

.md-2018041004-ll{
  margin-bottom: 4%;
}
.md-2018041004-ll .cc-table{
  display: table;
  width: 100%;
  padding: 3% 0;
}
.md-2018041004-ll .cc-table .cc-td{
  display: table-cell;
}
.md-2018041004-ll .cc-table .cc-td-1{
  vertical-align: middle;
  width: 5%;
  min-width: 20px;
}
.md-2018041004-ll .cc-table .cc-td-2{
  width: 40%;
  text-align: center;
}
.md-2018041004-ll .cc-table .cc-td-2 img{
  width: 60%;
}
.md-2018041004-ll .cc-table .cc-td-3{
  vertical-align: middle;
}
.md-2018041004-ll .cc-table .cc-td-3 h3{
  font-size: 22px;
  font-weight: 600;
}
.md-2018041004-ll .cc-table .cc-td-3 p{
  font-size: 14px;
  margin-bottom: 1%;
}
.md-2018041004-ll .cc-table .cc-td-3 .line{
  padding-top: 2%;
  min-height: 3px;
  background: #e5004f;
  width: 25%;
}
@media (max-width: 480px) {
  .md-2018041004-ll .cc-table .cc-td-3 h3{
    font-size: 18px;
  }
  .md-2018041004-ll .cc-table .cc-td-3 p{
    font-size: 14px;
  }
}
@media (max-width: 420px) {
  .md-2018041004-ll .cc-table .cc-td-3 h3{
    font-size: 14px;
  }
  .md-2018041004-ll .cc-table .cc-td-3 p{
    font-size: 12px;
  }
}

.md-2018041005-ll{
  margin-bottom: 4%;
}
.md-2018041005-ll .c-td-2 p{
  text-indent: 2em;
  line-height: 1.8;
}
@media (max-width: 480px) {
  .md-2018041005-ll .c-td-2 p{
    font-size: 14px;
  }
}

.md-2018041006-ll{
  margin-bottom: 5%;
}
.md-2018041006-ll .box-1{
  position: relative;
  padding-bottom: 60%;
  height: 0;
}
.md-2018041006-ll .box-1-c{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.md-2018041007-ll{
  margin: 0 -5%;
  padding:0 10% 16%;
  margin-bottom: 4%;
  position: relative;
}
.md-2018041007-ll .bg{
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url("http://kidtts.tmooc.cn/script/css/rep/img/img_ll_18.png") no-repeat;
  background-size: 100% auto;
}
.md-2018041007-ll .img-box{
  padding: 27% 14% 0%;
}

.md-2018041008-ll{
  margin-bottom: 5%;
}
.md-2018041008-ll .item{
  padding: 2% 0;
}
.md-2018041008-ll .item .tit{
  font-weight: 600;
  margin-right: 15px;
  vertical-align: middle;
}
.md-2018041008-ll .item img{
  vertical-align: middle;
}

@media (max-width: 480px) {
  .md-2018041008-ll .item .tit{
    font-size: 14px;
    margin-right: 10px;
  }
  .md-2018041008-ll .item img{
    height: 22px;
  }
}

.md-2018041009-ll{
  padding: 3% 0;
  text-align: center;
}
.md-2018041009-ll .item{
  display: inline-block;
  margin: 0 2%;
}
.md-2018041009-ll .c-icon{
  vertical-align: middle;
}
.md-2018041009-ll .c-label{
  vertical-align: middle;
  color: #333;
  border-bottom: 1px dashed #984e27;
  font-size: 15px;
}

@media (max-width: 500px) {
  .md-2018041009-ll .c-icon img{
    height: 18px;
  }
  .md-2018041009-ll .c-label{
    font-size:13px
  }
}

@media (max-width: 460px) {
  .md-2018041009-ll .c-icon img{
    height: 16px;
  }
  .md-2018041009-ll .c-label{
    font-size:13px
  }
}

.md-2018041301-ll{
  margin: 5% 0;
  padding: 0 3%;
}
.md-2018041301-ll .title{
  margin-bottom: 5%;
}
.md-2018041301-ll .title > img{
  width: 30%;
}
.md-2018041301-ll .box-1{
  position: relative;
  padding-bottom: 60%;
  height: 0;
}
.md-2018041301-ll .box-1-c{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}
